<template>
  <div class="leibie">
    <div class="option">
      <ul>
        <li>
          <button><span></span><router-link to="/bianqian">便签</router-link></button>
        </li>
        <li>
          <button><span></span><router-link to="/img">图片</router-link></button>
        </li>
        <li>
          <button><span></span><router-link to="/address">地址</router-link></button>
        </li>
        <li>
          <button><span></span>链接</button>
        </li>
        <li>
          <button><span></span>名片</button>
        </li>
        <li>
          <button><span></span>三省</button>
        </li>

        <li>
          <button><span></span>数据块</button>
        </li>
      </ul>
      <ul>
        <li>
          <button><span></span><router-link to="/qingdan">清单</router-link></button>
        </li>
        <li>
          <button><span></span>绘图</button>
        </li>

        <li>
          <button><span></span>日子</button>
        </li>
        <li>
          <button><span></span><router-link to="/webbank">银行卡</router-link></button>
        </li>

        <li>
          <button><span></span>账户</button>
        </li>

        <li>
          <button><span></span>心情</button>
        </li>
      </ul>
    </div>
  </div>
</template>

<style lang="less" scoped>
.leibie {
  width: 100%;
  .option {
    width: 100%;
    display: flex;
    justify-content: space-between;
    padding-top: 20px;
    button {
      display: block;
    }
    ul {
      flex-grow: 1;
      &:nth-of-type(1) {
        span {
          background-image: url(../assets/images/sprite2.png);
          top: -4px;
        }
        li {
          &:nth-of-type(2) {
            span {
              background-position: 0px -83px;
            }
          }
        }
        li {
          &:nth-of-type(3) {
            span {
              background-position: 0px -168px;
            }
          }
        }
        li {
          &:nth-of-type(4) {
            span {
              background-position: 0px -249px;
            }
          }
        }
        li {
          &:nth-of-type(5) {
            span {
              background-position: 0px -334px;
            }
          }
        }
        li {
          &:nth-of-type(6) {
            span {
              background-position: 0px -420px;
            }
          }
        }
        li {
          &:nth-of-type(7) {
            span {
              background-position: 0px -503px;
            }
          }
        }
      }
      &:nth-of-type(2) {
        span {
          background-image: url(../assets/images/sprite3.png);
          top: 0px;
        }
        li {
          &:nth-of-type(2) {
            span {
              background-position: 0px -80px;
            }
          }
        }
        li {
          &:nth-of-type(2) {
            span {
              background-position: 0px -80px;
            }
          }
        }
        li {
          &:nth-of-type(3) {
            span {
              background-position: 0px -158px;
            }
          }
        }
        li {
          &:nth-of-type(4) {
            span {
              background-position: 0px -233px;
            }
          }
        }
        li {
          &:nth-of-type(5) {
            span {
              background-position: 0px -310px;
            }
          }
        }
        li {
          &:nth-of-type(6) {
            span {
              background-position: 0px -390px;
            }
          }
        }
      }
      li {
        width: 100%;
        padding: 20px 0;
        padding-left: 80px;
        box-sizing: border-box;
        button {
          background-color: transparent;
          //   margin: 0 auto;
          font-size: 16px;
          position: relative;
          span {
            display: inline-block;
            width: 25px;
            height: 25px;
            position: absolute;
            left: -30px;
            background-repeat: no-repeat;
            background-size: 25px;
          }
        }
        &:active {
            background-color: #f0f0f0;
        }
      }
    }
  }
}
</style>